<template>
  <div>
    <div v-if="form.ShowSelectNum==1" style="margin-bottom: 30px">
    <h2><b>查询条件</b></h2>
    <el-row>
      <el-col :span="8">
        <span>生产计划编码</span>
      </el-col>
      <el-col :span="8">
        <span>生产计划名称</span>
      </el-col>
      <el-col :span="3">
        <span>状态</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item style="width: 300px;">
          <el-input v-model="form.MainplanNum" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item style="width: 300px;">
          <el-input v-model="form.MainplanName" />
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item style="width: 300px;">
          <el-select v-model="form.MainplanState" placeholder="请选择状态" >
            <el-option label="全部" :value=0 />
            <el-option label="新建" :value=1 />
            <el-option label="变更" :value=2 />
            <el-option label="确认" :value=3 />
            <el-option label="取消" :value=4 />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-button style="margin-left:1000px;" @click="ClearSelectData">重置</el-button>
    <el-button style="width: 130px;background-color: #556ee6;color: white;" @click="GetSelectData">查询</el-button>
  </div>

  <el-row>
    <el-col :span="1">
      <span><b>主生产计划表</b></span>
    </el-col>
    <el-col :span="2">
      <el-upload
            ref="fileInput"
            class="avatar-uploader"
            action="https://localhost:7261/api/MainPlan/AddExcelData"
            :show-file-list="false"
            :on-success="AddMainplanExcelData"
      >
        <el-button style="margin-left: 830px;background-color:#34c38f;color: white;font-size: 15px;border-radius:4px ;border-color: #34c38f ;height: 35px;width: 100px; " >生成Excel表格</el-button>
      </el-upload>
    </el-col>
    <el-col  :span="3">
      <el-button style="margin-left: 830px;background-color:#556ee6;color: white;font-size: 15px;border-radius:4px ;border-color: #34c38f ;height: 35px;width: 100px;" >自动生成MPS</el-button>
    </el-col>
    <el-col  :span="3">
      <el-button style="margin-left:  770px;background-color: #34c38f;color: white;font-size: 15px;border-radius:4px ;border-color: #34c38f ;height: 35px;width: 130px;" @click="InsertWarehouse"><img src="../Warehouse/img/image copy.png" alt="button img" style="width: 18px;height: 15px;" >手动新增MPS</el-button>
    </el-col>
    <el-col  :span="3">
      <el-button style="margin-left: 740px;background-color: white;color: slategray;font-size: 15px;border-radius: 4px;border-color:slategray ;height: 35px;width: 100px;" @click="UpShowSelectNum" v-if="form.ShowSelectNum==0"><img src="../Warehouse/img/image copy 2.png" alt="button img" style="width: 18px;height: 15px;">展开查询</el-button>
      <el-button style="margin-left: 740px;background-color: white;color: #f1b44c;font-size: 15px;border-radius: 4px;border-color:#f1b44c ;height: 35px;width: 100px;" @click="UpShowSelectNum" v-if="form.ShowSelectNum==1"><img src="../Warehouse/img/image copy 2.png" alt="button img" style="width: 18px;height: 15px;" >结束查询</el-button>
    </el-col>
  </el-row>
  <div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="mainplanId" label="序号" width="60" />
    <el-table-column prop="mainplanNum" label="计划编码" width="130" />
    <el-table-column prop="mainplanName" label="计划名称" width="130" />
    <el-table-column prop="createName" label="制单人" width="130" />
    <el-table-column prop="createSection" label="制单部门" width="150" />
    <el-table-column label="创建时间" width="150" >
      <template v-slot="scope">
        {{moment(scope.row.createTime).format("YYYY年MM月DD日")}}
      </template>
    </el-table-column>
    <el-table-column label="状态" width="130">
      <template v-slot="scope">
        <el-tag v-if="scope.row.mainplanState==1" type="info" effect="plain">未提交</el-tag>
        <el-tag v-if="scope.row.mainplanState==2" type="success" effect="plain">已审批</el-tag>
        <el-tag v-if="scope.row.mainplanState==3" type="danger" effect="plain">已变更</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="审批状态" width="130">
      <template v-slot="scope">
        <el-tag v-if="scope.row.approvalState==false" type="primary" effect="plain">有效</el-tag>
        <el-tag v-if="scope.row.approvalState==true" type="danger" effect="plain">无效</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="390" >
        <template v-slot="scope">
          <el-button style="background-color: #ffffff;font-size: 17px;border-radius: 4px;border-color:#ffffff ;height: 35px;width: 80px;" @click="UpMainPlanData(scope.row.mainplanId)"><img src="../Warehouse/img/image copy 4.png" alt="">编辑</el-button>
        <el-button style="background-color: #ffffff;font-size: 17px;border-radius: 4px;border-color:#ffffff ;height: 35px;width: 80px;" @click=DelMainplan(scope.row.mainplanId)><img src="../Warehouse/img/image copy 5.png" alt="">删除</el-button>
        </template>
    </el-table-column>
  </el-table>
  </div>
  <div>
    <el-pagination
    v-model:current-page="form.ynum"
    v-model:page-size="form.qnum"
    layout="prev, pager, next"
    :total="form.count"
    class="mt-4"
    @current-change="handleCurrentChange"
    :class="{ 'align-right': true }"
  />
  </div>
  </div>
</template>
  
<script lang="ts" setup>
import {ref,reactive,onMounted} from 'vue';
const apiUri=import.meta.env.VITE_APP_API_URL_WAREHOUSE;
import axios from 'axios';
import moment from 'moment'
import {useRouter } from 'vue-router';
import { ElMessage, type UploadProps } from 'element-plus';
const router=useRouter();

const form=reactive({
  ShowSelectNum:0,
  MainplanNum:'',
  MainplanName:'',
  MainplanState:'',
  ynum:1,
  qnum:5,
  count:0,
  znum:0
})

onMounted(()=>{
  GetTableData();
})

//显示主生产计划表数据
const tableData=ref([]);
const GetTableData=()=>{
  axios.post(apiUri+"/api/MainPlan/ShowMainplanData",{
    MainplanNum:form.MainplanNum,
    MainplanName:form.MainplanName,
    MainplanState:form.MainplanState||0,
    ynum:form.ynum,
    qnum:form.qnum
  }).then(res=>{
    if(res.data.code>0)
    {
      tableData.value=res.data.data.data;
      form.count=res.data.data.count;
      form.znum=res.data.data.znum;
      console.log(res.data.data.data);
    }
  })
}

//跳转主生产添加页面
const InsertWarehouse=()=>{
  console.log('123');
  router.push('/AddMainPlans');
}

//展开搜索行
const UpShowSelectNum=()=>{
  console.log('0');
  if(form.ShowSelectNum==1)
  {
    console.log('0');
    form.ShowSelectNum=0;
  }
  else if(form.ShowSelectNum==0)
  {
    console.log('1');
    form.ShowSelectNum=1;
  }
}

//重置查询条件
const ClearSelectData=()=>{
  form.MainplanNum='';
  form.MainplanName='';
  form.MainplanState='';
}

//查询
const GetSelectData=()=>{
  GetTableData();
}


//页数
const handleCurrentChange=(val:number)=>{
  form.ynum=val;
  console.log(val);
  GetTableData();
}

//删除
const DelMainplan=(MainplanId:any)=>{
  axios.post(apiUri+"/api/MainPlan/DelMainplanData",{
    mainplanId:MainplanId
  }).then(res=>{
    if(res.data.code>0)
    {
      ElMessage.success('删除成功');
      GetTableData();
    }
    else
    {
      ElMessage.success('删除失败');
    }
  })
}

//修改主生产计划
const UpMainPlanData=(MainplanId:any)=>{
  router.push({
    path:'/UpMainPlan',
    query:{
      MainplanId:MainplanId
    }
  })
}

const AddMainplanExcelData:UploadProps['onSuccess']=(
  response,
uploadFile)=>{
  console.log('Excel',response,uploadFile);
  if(response!=null)
  {
    ElMessage.success('导入数据成功');
  }
  else
  {
    ElMessage.success('导入数据失败');
  }
}


</script>

<style>
.align-right {
  float: right;
}
</style>